<template>
  <div class="departments-container">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="组织架构" name="first" />
      </el-tabs>
      <div class="box">
        <!-- 头部开始 -->
        <Depart :de-date="data1" @success="success" />
        <!-- 头部结束 -->
        <el-divider style="margin: 16px 0">黑马公司组织架 构主体</el-divider>
        <!-- 树形控件开始 -->
        <el-tree
          :data="list"
          :props="defaultProps"
          default-expand-all
          @node-click="handleNodeClick"
        ><template slot-scope="{ data }">
          <Depart :de-date="data" :tree-flag="true" @success="success" />
        </template>
        </el-tree>
        <!-- 树形控件结束 -->
      </div>
    </el-card>
  </div>
</template>

<script>
import { todo } from '@/utils'
import { getDepartmentApi } from '@/api/departments'
export default {
  name: 'Departments',
  data() {
    return {
      data1: {
        name: '',
        manager: ''
      },
      activeName: 'first',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      list: []
    }
  },

  computed: {},
  created() {
    this.getDepartments()
  },
  methods: {
    success() {
      this.getDepartments()
    },
    async getDepartments() {
      const res = await getDepartmentApi()
      this.list = todo(res.data.depts)
      this.data1 = {
        id: '', // 添加部门的时候可以传pid为空
        name: res.data.companyName,
        manager: res.data.companyManager || '负责人',
        companyId: res.data.companyId
      }
    },
    handleNodeClick(data) {}
  }
}
</script>
<style lang="scss" scoped>
.departments-container {
  .el-card {
    padding: 40px;
    .box {
      padding: 40px 60px;
      .right-box {
        text-align: right;
      }
    }
  }
}
</style>
